@import '@motiadev/ui/styles.css';
@import '@motiadev/ui/globals.css';

@import 'tw-animate-css';
@config "../tailwind.config.js";

@keyframes flowDash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20;
  }
}

.json-view {
  background: rgba(0, 0, 0, 0.1);
}

.dark {
  .react-flow__panel {
    background: var(--background);
  }
  .json-view {
    background: rgba(0, 0, 0, 0.8);
  }
}

.font-mono {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
}

.edge-animated {
  stroke-dasharray: 5; /* length of dash pattern */
  stroke-linecap: round; /* round the dash ends */
  animation: flowDash 1s linear infinite;
}

.json-view {
  border-radius: 8px;
  padding: 12px 12px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.json-view--pair,
.json-view--property,
.json-view > span {
  line-height: 24px;
}

.json-view--property {
  font-weight: 600;
}
